<template>
  <div>
    <div class="chart-main" ref="chartmain"></div>
  </div>
</template>

<script>
export default {
  name: "showChart",
  data() {
    return {
      chartdata: {
        xdata: this.$store.state.xdata,
        dodata: this.$store.state.dodata,
        makedata: this.$store.state.makedata,
        unit: this.$store.state.unit,
      },
      myecharts: "",
      option: "",
    };
  },
  mounted() {
    this.chartshow(this.chartdata);
  },
  methods: {
    chartshow(chartdata) {
      this.myecharts = this.echarts.init(this.$refs.chartmain);
      this.option = {
        title: {
          text: "业务数据统计报表",
          textStyle: {
            fontSize: 32,
            color: "#555",
          },
          top: "2%",
          subtext: "",
          left: "center",
        },

        color: ["rgb(51,75,92)", "rgb(106,176,184)"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

        legend: {
          top: "12%",
          data: ["业务预约数", "业务办理数"],
        },

        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        grid: {
          top: "25%",
        },
        xAxis: [
          {
            type: "category",
            name: chartdata.unit,
            axisTick: { show: false },
            data: chartdata.xdata,
          },
        ],

        yAxis: [
          {
            type: "value",
            name: "数量",
          },
        ],

        series: [
          {
            name: "业务预约数",
            type: "bar",
            barGap: 0,
            label: {
              // 图形上的文本标签
              show: true,
              position: "top", // 相对位置
              rotate: 0, // 旋转角度
              color: "#666",
              fontSize: 9,
              formatter: "{c}(个)",
            },
            barCateGoryGap: 20,
            barWidth: 50, // 柱形的宽度
            data: chartdata.dodata,
          },
          {
            name: "业务办理数",
            type: "bar",
            label: {
              // 图形上的文本标签
              show: true,
              position: "top", // 相对位置
              rotate: 0, // 旋转角度
              color: "#666",
              fontSize: 9,
              formatter: "{c}(个)",
            },
            barCateGoryGap: 20,
            barWidth: 50, // 柱形的宽度
            data: chartdata.makedata,
          },
        ],
      };
      this.myecharts.setOption(this.option, true);
      window.onresize = this.myecharts.resize;
    },
    // 动态搜索图表数据
    changedata(data) {
      this.chartdata = data;
      this.chartshow(this.chartdata);
    },
  },
};
</script>
<style lang="less" scoped>
.chart-main {
  width: 100%;
  height: 650px;
  padding: 20px 0;
  background-color: #fafafa;
  margin: 30px 0;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
}
</style>